<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="1080px"
    @close="close"
  >
    <el-form
      ref="form"
      class="znzg"
      label-suffix="："
      label-width="136px"
      :model="formData"
      :rules="rules"
      size="small"
    >
      <el-form-item v-if="title === '添加'" label="血源" prop="blood_source">
        <el-select
          v-model="formData.blood_source"
          class="wd200 mr12"
          clearable
          filterable
          placeholder="血源"
        >
          <el-option
            v-for="(item, index) in bloodSourcesFilter"
            :key="index"
            :label="item.name"
            :value="item.name_his"
          />
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="6">
          <el-form-item label="储血号" prop="apply_num">
            <el-input
              v-if="title === '添加'"
              v-model.trim="formData.blood_id"
              clearable
              placeholder="储血号"
            />
            <span v-else>{{ formData.blood_id }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="血液成分" prop="BLOOD_TYPE_NAME">
            <el-cascader
              v-if="title === '添加'"
              v-model="formData.product_id_path"
              class="wd150"
              clearable
              filterable
              :options="products"
              :props="props"
              :show-all-levels="false"
              size="mini"
            />
            <span v-else>{{ formData.BLOOD_TYPE_NAME }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="初检ABO" prop="blood_group">
            <el-select
              v-if="title === '添加'"
              v-model="formData.blood_group"
              clearable
              filterable
              placeholder="初检ABO"
              size="mini"
            >
              <el-option
                v-for="(item, index) in bloodGroups"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
            <span v-else>{{ formData.blood_group }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="初检Rh(D)" prop="blood_rhd">
            <el-select
              v-if="title === '添加'"
              v-model="formData.blood_rhd"
              clearable
              filterable
              placeholder="初检Rh(D)"
              size="mini"
            >
              <el-option
                v-for="(item, index) in bloodRhds"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
            <span v-else>{{ formData.blood_rhd }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item class="form-item-table" label="机器结果" prop="apply_num">
        <el-table
          border
          :data="filterInspectAbos(formData.inspectAbosFormat)"
          stripe
          style="width: 100%"
        >
          <el-table-column align="center" label="抗A" prop="AntiA" />
          <el-table-column align="center" label="抗B" prop="AntiB" />
          <el-table-column align="center" label="抗D" prop="AntiD" />
          <el-table-column align="center" label="Ac" prop="Ac" />
          <el-table-column align="center" label="Bc" prop="Bc" />
          <el-table-column align="center" label="Ctrl" prop="Ctrl" />
          <el-table-column align="center" label="抗筛" prop="ABScr" />
          <el-table-column align="center" label="操作" prop="ABScr">
            <template #default="{ row }">
              <el-link
                :disabled="row.id === formData.inspect_abo_id"
                size="mini"
                type="primary"
                @click="updateInspectId(row)"
              >
                设为默认
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item class="form-item-table" label="试管结果" prop="apply_num">
        <el-table border :data="recheckData" stripe style="width: 100%">
          <el-table-column align="center" label="抗A" prop="date">
            <template #default="{ row }">
              <el-select
                v-model="row.AntiA"
                clearable
                filterable
                placeholder="抗A"
                size="mini"
              >
                <el-option
                  v-for="(item, index) in bloodResults"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="抗B" prop="AntiB">
            <template #default="{ row }">
              <el-select
                v-model="row.AntiB"
                clearable
                filterable
                placeholder="抗B"
                size="mini"
              >
                <el-option
                  v-for="(item, index) in bloodResults"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="抗D" prop="AntiD">
            <template #default="{ row }">
              <el-select
                v-model="row.AntiD"
                clearable
                filterable
                placeholder="抗D"
                size="mini"
              >
                <el-option
                  v-for="(item, index) in bloodResults"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="Ac" prop="Ac">
            <template #default="{ row }">
              <el-select
                v-model="row.Ac"
                clearable
                filterable
                placeholder="Ac"
                size="mini"
              >
                <el-option
                  v-for="(item, index) in bloodResults"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="Bc" prop="Bc">
            <template #default="{ row }">
              <el-select
                v-model="row.Bc"
                clearable
                filterable
                placeholder="Bc"
                size="mini"
              >
                <el-option
                  v-for="(item, index) in bloodResults"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="Ctrl" prop="Ctrl">
            <template #default="{ row }">
              <el-select
                v-model="row.Ctrl"
                clearable
                filterable
                placeholder="Ctrl"
                size="mini"
              >
                <el-option
                  v-for="(item, index) in bloodResults"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="RhD阴性确认试验" prop="blood_group">
            <el-input
              v-model="formData.rhd_descri"
              clearable
              placeholder="RhD阴性确认试验"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="抗筛" prop="ABScr">
            <el-select
              v-model="formData.ABScr"
              clearable
              filterable
              placeholder="抗筛"
            >
              <el-option
                v-for="(item, index) in bloodResults"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="ABO" prop="blood_group_recheck">
            <div class="d-flex">
              <el-select
                v-model="formData.blood_group_recheck"
                class="wd150"
                clearable
                filterable
                placeholder="ABO"
              >
                <el-option
                  v-for="(item, index) in bloodGroups"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
              <el-input
                v-if="formData.blood_group_recheck === '基因型'"
                v-model="formData.blood_group_descri"
                class="ml12"
                clearable
                placeholder="备注"
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Rh(D)" prop="blood_rhd_recheck">
            <div class="d-flex">
              <el-select
                v-model="formData.blood_rhd_recheck"
                class="wd150"
                clearable
                filterable
                placeholder="Rh(D)"
              >
                <el-option
                  v-for="(item, index) in bloodRhds"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
              <el-input
                v-if="formData.blood_rhd_recheck === '基因型'"
                v-model="formData.blood_rhd_descri"
                class="ml12"
                clearable
                placeholder="备注"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="descri">
        <el-input
          v-model="formData.descri"
          clearable
          placeholder="备注"
          rows="3"
          type="textarea"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('mainForm')">提交</el-button>
        <el-button @click="reset('mainForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  import {
    updateOne as doEdit,
    // eslint-disable-next-line no-unused-vars
    addOne as doAdd,
    getOne,
  } from '@/api/bloodRecheck'
  import { bloodGroups, bloodRhds, bloodResults } from '@/utils/constant'
  import { removeEmptyField } from '@/utils'
  import { mapGetters } from 'vuex'
  import { convertArr2Obj } from '@/utils/index'
  export default {
    data() {
      return {
        machineData: [{}],
        formData: {
          blood_id: '',
          blood_group_recheck: '',
          blood_rhd_recheck: '',
          descri: '',
        },
        recheckData: [
          {
            AntiA: '',
            AntiB: '',
            AntiD: '',
            Ctrl: '',
            Ac: '',
            Bc: '',
          },
        ],
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        activeName: 'first',
        bloodGroups,
        bloodRhds,
        bloodResults,
        title: '',
        dialogFormVisible: false,
        props: { label: 'name', value: 'id' },
      }
    },
    computed: {
      ...mapGetters(['products', 'bloodSources']),
      productsAll() {
        const res = []
        this.products.forEach((item) => {
          const { id, name, code, children } = item
          res.push({ id, name, code })
          children.forEach((citem) => {
            const { id, name, code } = citem
            res.push({ id, name, code })
          })
        })
        return res
      },
      productsAllObj() {
        const res = convertArr2Obj(this.productsAll, 'id')
        return res
      },
      bloodSourcesFilter() {
        return this.bloodSources.filter((val) => {
          return (
            val.name.indexOf('自采') === -1 && val.name.indexOf('自体') === -1
          )
        })
      },
    },
    created() {},
    methods: {
      showEdit(row) {
        if (!row) {
          this.title = '添加'
        } else {
          this.title = '编辑'
          this.getOne(row.blood_id)
        }
        this.dialogFormVisible = true
      },
      async getOne(blood_id) {
        const { data } = await getOne(blood_id)
        this.formData = data
        this.recheckData = data.recheckData
      },
      close() {
        this.$refs['form'].resetFields()
        this.formData = {
          blood_id: '',
          blood_group_recheck: '',
          blood_rhd_recheck: '',
          descri: '',
        }
        this.dialogFormVisible = false
      },
      filterInspectAbos(rows) {
        if (rows) {
          return rows
        }
        return []
      },
      updateInspectId(row) {
        const postData = {
          blood_id: row.blood_id,
          inspect_abo_id: row.id,
          isNotUpdate: 1,
        }
        this.$confirm('确定将此条记录设置为默认记录吗?', {
          title: '操作确认',
          type: 'warning',
        })
          .then(async () => {
            const { msg } = await doEdit(postData.blood_id, postData)
            this.formData.inspect_abo_id = row.id
            this.$baseMessage(msg, 'success', 'vab-hey-message-success')
            this.recheckData[0] = { ...this.recheckData[0], ...row }
            this.recheckData = JSON.parse(JSON.stringify(this.recheckData))
            this.formData = { ...this.formData, ...this.recheckData[0] }
            if (!this.formData.blood_group_recheck) {
              this.formData.blood_group_recheck = row.ABO
            }
            if (!this.formData.blood_rhd_recheck) {
              this.formData.blood_rhd_recheck = row.RhD
            }
            this.$emit('close')
          })
          .catch(() => {})
      },
      submit() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            if (this.title === '编辑') {
              this.$confirm('确定修改此条记录吗?', {
                title: '操作确认',
                type: 'warning',
              })
                .then(async () => {
                  this.formData = { ...this.formData, ...this.recheckData[0] }
                  let { msg } = await doEdit(
                    this.formData.blood_id,
                    removeEmptyField(this.formData)
                  )
                  this.$baseMessage(msg, 'success', 'vab-hey-message-success')
                  this.$emit('fetch-data')
                  this.$emit('census')
                  this.close()
                })
                .catch(() => {})
            } else {
              if (!this.formData.product_id_path) {
                this.$baseMessage(
                  '请选择血液成分',
                  'error',
                  'vab-hey-message-error'
                )
                return
              }
              this.formData = { ...this.formData, ...this.recheckData[0] }
              const product =
                this.productsAllObj[this.formData.product_id_path[1]]
              this.formData.BLOOD_TYPE_NAME = product.name
              this.formData.BLOOD_TYPE = product.code
              console.log(this.formData)
              let { msg } = await doAdd(removeEmptyField(this.formData))
              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
              this.$emit('fetch-data')
              this.$emit('census')
              this.close()
            }
          } else {
            return false
          }
        })
      },
    },
  }
</script>
<style lang="scss">
  .znzg .form-item-table .el-form-item__content {
    line-height: 20px !important;
  }
</style>
